<template>
  <div id="app">
      <div class="header">
          <span></span>
          <p>全英雄联盟最骚的骚猪</p>
      </div>

      <ul class="content">
          <li v-for="item in list" :key="item.id">
              <div>{{item}}</div>
          </li>
      </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
        list:['我的订单','优惠券','我的足迹','我的收藏','地址管理','联系客服','帮助中心','意见反馈',],
    }
  },
  methods: {

  },
  computed: {

  },
  components: {

  },
  created() {

  },
  mounted() {

  },
}
</script>

<style scoped lang="scss">
    #app{
        height: 650px;
        background-color: #f4f4f4;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .header{
        display: flex;
        align-items: center;
        width: 375px;
        height: 142px;
        background:url(../../assets/img/images/1.jpg) no-repeat;
        background-size: cover;
        span{
            display: inline-block;
            width: 76px;
            height: 76px;
            background: url(../../assets/img/images/2.jpg) no-repeat;
            background-size: cover;
            background-position: 0 -10px;
            border-radius: 50%;
            margin-left: 15px;
        }
        p{
            margin-left: 15px;
            color: #fff;
        }
    }

    .content{
        display: flex;
        flex-wrap: wrap;
        height: 218px;
        background-color: #fff;
        div{
            width: 124px;
            height: 72px;
            line-height: 72px;
            border-right: 1px solid rgba(0,0,0,.15);
            border-bottom: 1px solid rgba(0,0,0,.15);
        }
        & li:nth-child(3) div{
            border-right:none;
            // border-bottom:none;
        }
        & li:nth-child(6) div{
            border-right:none;
            // border-bottom:none;
        }
        & li:nth-child(7) div{
            // border-right:none;
            border-bottom:none;
        }
        & li:nth-child(8) div{
            // border-right:none;
            border-bottom:none;
        }
    }
</style>
